<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>系统常态化运行评分系统</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../admin/css/other/result.css" />
</head>

<body class="pear-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    请选择相应系统进行数据查询
                </div>
                <div class="layui-card-body">
                    <form id="userForm" class="layui-form" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-form-label">系统</div>
                                <div class="layui-input-inline" style="width: 200px;">
                                    <select id="mineAreaId" name="mineAreaId" class="province-selector"
                                        lay-filter="mineAreaId">
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="lineCheckTime" style="min-height:350px;"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script src="../../scripts/utils/request.js"></script>
    <script src="../../scripts/utils/auth.js"></script>
    <script src="../../scripts/echart/pfechart.js"></script>
    <script src="../../scripts/minearea.js"></script>
    <script>
        var $, table, form, drawer, popup, notice, laydate, button, echarts
        layui.use(['table', 'form', 'jquery', 'drawer', 'popup', 'notice', 'laydate', 'button', 'echarts'], function () {
            table = layui.table;
            form = layui.form;
            $ = layui.jquery;
            drawer = layui.drawer;
            popup = layui.popup;
            notice = layui.notice;
            laydate = layui.laydate;
            button = layui.button;
            echarts = layui.echarts;
            const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']

            let lineCheckTime = echarts.init(document.getElementById('lineCheckTime'), null, {
                height: 600
            });

            window.onresize = function () {
                lineCheckTime.resize();
            }
            var myMineData = []
            getMyMineData();

            form.on('select(mineAreaId)', function (data) {
                let mineId = $("#mineAreaId").val();
                let mineName = $("#mineAreaId").find("option:selected").text();
                render(mineId, mineName)
            });
            function render(mineId, mineName) {
                postAjaxNoSuccessTip('/api/analyse/mineOneSystem', { "id": mineId }, function (response) {
                    lineCheckTime.clear();
                    lineCheckTime.hideLoading();
                    if (response.data == null || response.data.yaxis == null) {
                        lineCheckTime.showLoading({
                            text: '暂无数据',
                            showSpinner: false,    // 隐藏加载中的转圈动图
                            textColor: '#9d9d9d',
                            maskColor: 'rgba(255, 255, 255, 0.8)',
                            fontSize: '25px',
                            fontWeight: 'bold',
                            fontFamily: 'Microsoft YaHei'
                        });
                        return
                    }
                    let option = getBarOption(response, mineName + '---评分趋势');
                    lineCheckTime.setOption(option);
                }, null);
            }
            function getMyMineData() {
                postAjaxNoSuccessTip('/api/analyse/getSystemList', null, function (response) {
                    myMineData = response.data;
                    initMySelect();
                }, null);
            }
            function initMySelect() {
                $("[name='mineAreaId']").empty();
                for (let i = 0; i < myMineData.length; i++) {
                    $("[name='mineAreaId']").append(new Option(myMineData[i].name, myMineData[i].id));
                }
                form.render("select");
                let mineId = $("#mineAreaId").val();
                let mineName = $("#mineAreaId").find("option:selected").text();
                render(mineId, mineName)
            }
        });
    </script>
</body>

</html>